<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>随便打TCS系统</title>
    <script type="text/javascript" src="<%=basePath%>js/initPage.js"></script>
    <!-- Bootstrap -->
    <link href="<%=basePath%>vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="<%=basePath%>vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="<%=basePath%>vendors/iCheck/skins/flat/green.css" rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link href="<%=basePath%>vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <!-- JQVMap -->
    <link href="<%=basePath%>vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet" />
    <!-- bootstrap-daterangepicker -->
    <link href="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="<%=basePath%>build/css/custom.min.css" rel="stylesheet">

    <!--新增样式-->
    <link rel="stylesheet" href="<%=basePath%>css/tree.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css">
    <style>
        a:focus,
        a:hover {
            text-decoration: none;
        }

        a {
            text-decoration: none;
        }

        .fa-minus-square-o:before {
            color: #ff9800
        }

        .fa-file-text-o:before {
            color: #009688
        }

        .ttRes {
            margin: 0 0 0 35px;
            color: #009688;
        }

        .userTree {
            display: flex;
            flex-direction: row;
        }

        .userTree #default_tree {
            flex: 1;
        }

        .userTree .userControl {
            flex: 1;
        }

        .x_panel {
            display: flex;
        }
        .x_content{
            flex: 2;
        }
        th, td{text-align: center;}
        .btn_icon button{
            border-radius: 5px !important;
            border:0;
            background: transparent;
        }
        .btn_icon button img{width:20px;}
    </style>
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div class="col-md-3 left_col">
            <div class="left_col scroll-view">
                <div class="clearfix"></div>
                <br />
            </div>
        </div>
        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">
                <div class="page-title">
                    <div class="title_left"></div>
                    <div class="x_content">
                        用户手机号码：<input type="text" id="username" value="${username}" />
                        <button type="submit" class="btn btn-default"
                                onclick="selectAll()">搜索</button>
                    </div>
                </div>
                <div class="x_panel">
                    <div id="default_tree" class="col-sm-4"></div>
                    <div class="x_content">
                        <table id="subtable" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>用户手机号</th>
                                <th>注册时间</th>
                                <th>总积分</th>
                                <th>已提积分</th>
                                <th>未提积分</th>
                                <th>会员升级时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>${subscribers.username}</td>
                                <td>${subscribers.mobile}</td>
                                <td><fmt:formatDate value="${subscribers.createtime}" type="date" pattern="yyyy-MM-dd" /></td>
                                <td>${subscribers.moneyAll}</td>
                                <td>${subscribers.withdrawalsAll}</td>
                                <td>${subscribers.igrewardAll}</td>
                                <td><fmt:formatDate value="${subscribers.endtime}" type="date" pattern="yyyy-MM-dd" /></td>
                                <td>
                                    <div class="input-group-btn btn_icon">
                                        <button type="button" class="btn btn-default" onclick="content_xiugaiyonghu('${subscribers.id}');">
                                            <img src="<%=basePath%>images/modifiy.png" alt="修改" title="修改"/>
                                        </button>
                                        <c:if test="${subscribers.datastatus == true }">
                                        <button type="button" class="btn btn-default" style="margin:0 10px; border-radius: 5px;" onclick="dongjie('${subscribers.id}','${subscribers.mobile}')">
                                            <img src="<%=basePath%>images/freeze.png" alt="冻结" title="冻结"/>
                                        </button>
                                        </c:if>
                                        <c:if test="${subscribers.datastatus == false }">
                                        <button type="button" class="btn btn-default" style="margin:0 10px; border-radius: 5px;" onclick="jiedong('${subscribers.id}','${subscribers.mobile}')">
                                                <img src="<%=basePath%>images/freeze.png" alt="解冻" title="解冻"/>
                                        </button>
                                        </c:if>
                                        <button type="button" class="btn btn-default"  onclick="selectNextUsers('${subscribers.id}')">
                                            <img src="<%=basePath%>images/lowerControl.png" alt="下级账户" title="下级账户"/>
                                        </button>
                                        <button type="button" class="btn btn-default bill bill-active">
                                            <img src="<%=basePath%>images/billIcon.png" alt="进出帐" title="进出帐"/>
                                        </button>

                                    </div>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        <div class="detailList">
                            <p style="font-size:15px;font-weight:800" class="bill-title">进账明细</p>
                            <table id="datatable" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>类型</th>
                                    <th>时间</th>
                                    <th>状态</th>
                                    <th>金额</th>
                                    <th>用户</th>
                                    <th>等级</th>
                                </tr>
                                </thead>
                                <tbody class="test111">

                                </tbody>
                            </table>
                            <div style="width: 100%; text-align: center;">
                                <div id='page'></div>
                                <div id='page2'></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <br />
            </div>

        </div>
    </div>
</div>
<script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="<%=basePath%>vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="<%=basePath%>vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="<%=basePath%>vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="<%=basePath%>vendors/moment/min/moment.min.js"></script>
<script src="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Chart.js -->
<script src="<%=basePath%>vendors/Chart.js/dist/Chart.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="<%=basePath%>js/custom.min.js"></script>
<!-- <script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script> -->
<script src="<%=basePath%>js/tree.js"></script>
<script>
    function content_xiugaiyonghu(id) {
        location.href = "content_xiugaiyonghu?id=" + id;
    }
    function selectNextUsers(shareper) {
        location.href = "selectNextUsers?shareper=" + shareper;
    }

    // ajax 对象
    function ajaxObject() {
        var xmlHttp;
        try {
            // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // Internet Explorer
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("您的浏览器不支持AJAX！");
                    return false;
                }
            }
        }
        return xmlHttp;
    }

    function dongjie(id,mobile) {
        var ajax = ajaxObject();
        ajax.open("post", "updateSubscribers?id=" + id +
            "&datastatus=" + false, false);
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajax.onreadystatechange = function() {
            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    var result = ajax.responseText;
                    if (result == "success") {
                        //请求成功
                        if(mobile != null ){
                            alert(mobile+"账号已经冻结");
                            selectAll();
                        }
                    } else {
                        //请求成功
                        alert(result);
                    }
                } else {
                    //请求失败
                    selectOEM(${curPage});
                }
            } else {
            }
        };
        ajax.send();
    }

    function jiedong(id,mobile) {
        var ajax = ajaxObject();
        ajax.open("post", "updateSubscribers?id=" + id +
            "&datastatus=" + true, false);
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajax.onreadystatechange = function() {
            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    var result = ajax.responseText;
                    if (result == "success") {
                        //请求成功
                        if(mobile != null ){
                            alert(mobile+"账号已经解冻");
                            selectAll();
                        }
                    } else {
                        //请求成功
                        alert(result);
                    }
                } else {
                    //请求失败
                    selectOEM(${curPage});
                }
            } else {
            }
        };
        ajax.send();
    }
</script>
<script>
    var type = 1; //进账
    var lowerState = false; //是否已查看过下级
    var data = [];
    var topState = false;
    var pagestatus = false;//進账加载标志
    var pagestatus2 = false;//出账加载标志

    /**
     * 纯粹的JS分页插件，代码缺点：JS操作DOM冗余太多，太繁琐
     */
    selectOEM(1);
   /* pageUtil.initPage('page', {
        totalCount: 500, //总条数，一般从回调函数中获取。如果没有数据则默认为1页
        curPage: 1, //初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
        showCount: 5, //分页栏显示的数量
        pageSizeList: [5], //自定义分页数，默认[5,10,15,20,50]
        defaultPageSize: 1, //默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
        isJump: true, //是否包含跳转功能，默认false
        isPageNum: true, //是否显示分页下拉选择，默认false
        isPN: true, //是否显示上一页和下一面，默认true
        isFL: true, //是否显示首页和末页，默认true
        jump: function (curPage, pageSize) {
            //跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
            selectOEM(curPage);
        }
    });*/

    function selectOEM(curPage) {
        $.ajax({
            url: 'http://shuntong.sbdznkj.com/SbdVoip/shuntong/selectRewards',
            type: 'POST',
            data: {
                userId: '${subscribers.id}',
                type: type,
                curPage: curPage,
                parentId: '${subscribers.parentid}'
            },
            success: function (data) {
                var res = data.json;
                var result = '';
                if (res.withdrawals==null&&res.rewards.length > 0) {
                    res.rewards.forEach(function (item, index) {
                        result +="<tr>";
                        if(item.type == 2){
                            result+="<td>红包奖励</td>";
                        }else if(item.type == 3){
                            result+="<td>全球分红</td>";
                        }else if(item.type == 4){
                            result+="<td>手动添加</td>";
                        }
                        result+="<td>" + getMyDate(item.createtime) + "</td>";
                        result+="<td>+</td>";
                        result+="<td>" + item.integral + "</td>";
                        if (item.type == 2){
                            result+="<td>" + item.ptusername + "</td>";
                        } else {
                            result+="<td></td>";
                        }
                        if(item.type == 2){
                            result+="<td>" + item.level + "级充值分红</td>";
                        }else{
                            result+="<td></td>";
                        }
                        result+="</tr>";
                    });
                    $('.test111').html(result);
                    if(pagestatus==false){
                        pageUtil.initPage('page', {
                            totalCount: res.totlenum, //总条数，一般从回调函数中获取。如果没有数据则默认为1页
                            curPage: res.curPage, //初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
                            showCount: 5, //分页栏显示的数量
                            pageSizeList: [5], //自定义分页数，默认[5,10,15,20,50]
                            defaultPageSize: 1, //默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
                            isJump: true, //是否包含跳转功能，默认false
                            isPageNum: true, //是否显示分页下拉选择，默认false
                            isPN: true, //是否显示上一页和下一面，默认true
                            isFL: true, //是否显示首页和末页，默认true
                            jump: function (curPage, pageSize) {
                                //跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
                                selectOEM(curPage);
                            }
                        });
                        pagestatus=true;
                    }
                }else if(res.rewards==null&&res.withdrawals.length > 0){
                    res.withdrawals.forEach(function (item, index) {
                        result +="<tr>";
                        result+="<td>提现</td>";
                        result+="<td>" + getMyDate(item.createtime) + "</td>";
                        result+="<td>-</td>";
                        result+="<td>" + item.money + "</td>";
                        result+="<td></td>";
                        result+="<td></td>";
                        result+="</tr>";
                    });

                    $('.test111').html(result);
                    if(pagestatus2==false){
                        pageUtil.initPage('page2', {
                            totalCount: res.totlenum, //总条数，一般从回调函数中获取。如果没有数据则默认为1页
                            curPage: res.curPage, //初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
                            showCount: 5, //分页栏显示的数量
                            pageSizeList: [5], //自定义分页数，默认[5,10,15,20,50]
                            defaultPageSize: 1, //默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
                            isJump: true, //是否包含跳转功能，默认false
                            isPageNum: true, //是否显示分页下拉选择，默认false
                            isPN: true, //是否显示上一页和下一面，默认true
                            isFL: true, //是否显示首页和末页，默认true
                            jump: function (curPage, pageSize) {
                                //跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
                                selectOEM(curPage);
                            }
                        });
                        pagestatus2=true;
                    }
                }
            }
        });
    }
    //树形图创建
    function buildTree(arr) {
        let temp = {};
        let tree = {};
        // 数组转 键值对
        arr.forEach(item => {
            temp[item.id] = item
        });
        let tempKeys = Object.keys(temp);
        tempKeys.forEach(key => {
            // 获取当前项
            let item = temp[key];
            // 当前项 pId
            let _itemPId = item.pId;
            // 获取父级项
            let parentItemByPid = temp[_itemPId];
            if (parentItemByPid) {
                if (!parentItemByPid.children) {
                    parentItemByPid.children = []
                }
                parentItemByPid.children.push(item)
            } else {
                tree[item.id] = item
            }
        });
        // 对象转数组并返回
        return Object.keys(tree).map(key => tree[key])
    }

    function selectAll(){
        var username = $("#username").val();
        location.href = "<%=basePath%>admin/selectSTSubscribers?username=" + username;
    }
    function selectUsers(tName){
        location.href = "<%=basePath%>admin/selectSTSubscribers?username=" + tName;
    }

    //下级加载
    function tBtn(prom) {
        if ($(prom).children("i").hasClass("fa-file-text-o")) {
            var id = $(prom).data().id;
            console.log(id);
            $(prom).addClass("active");
            var resTest = '';
            if (!lowerState) {
                $.ajax({
                    url: 'subRelation',
                    type: 'GET',
                    data: {
                        userId : id,
                        type : 2
                    },
                    success: function (res) {
                        res.map(item=>{
                            resTest+="<p class='ttRes' onclick='selectUsers("+ item.title +")'>"+item.title+"</p>";
                        });
                        $(".treeList a.active").append(resTest);
                        lowerState = true;
                    }
                });
            }
        }else{
            var tName = $(prom).data().name;
            selectUsers(tName);
        }
    }
    //上级加载
    function allSubscribers(userId) {
        if(!topState){
            $.ajax({
                url: 'subRelation',
                type: 'POST',
                data: {
                    userId : userId,
                    type : 1
                },
                success: function (res) {
                    data = buildTree(res);
                    $('#default_tree').append(loadTree(data));
                    topState=true;
                }
            });
            nodeClick($('#default_tree'));
        }
    }
    $(document).ready(function () {
        allSubscribers('${subscribers.id}');
        //进出帐切换
        $(".bill").on("click", function () {
            if ($(this).hasClass('bill-active')) {
                $(this).removeClass('bill-active');
                $(".bill-title").html('出账明细');
                $("#page").hide().siblings("#page2").show();
                type = 2;
            } else {
                $(this).addClass('bill-active');
                $(".bill-title").html('进账明细');
                $("#page2").hide().siblings("#page").show();
                type = 1;
            }
            selectOEM(1);
        });
    });

    function getMyDate(str) {
        var oDate = new Date(str),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth() + 1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),
            oTime;
            oTime = oYear + '-' + getzf(oMonth) + '-' + getzf(oDay) + ' ' + getzf(oHour) + ':' + getzf(oMin) + ':' + getzf(oSen);
        return oTime;
    }
    //补0操作
    function getzf(num) {
        if (parseInt(num) < 10) {
            num = '0' + num;
        }
        return num;
    }
</script>
</body>

</html>
